<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			var map = null;
			 // 百度地址坐标
			var xpoint = 104.056083,
				ypoint = 30.650847;
			 // 我的位置坐标
			var my_xpoint = 0,
				my_ypoint = 0;
			var name;
			mui.init();
			mui.plusReady(function() {
				var web = plus.webview.currentWebview();
				xpoint = web.lng;
				ypoint = web.lat;
				name = web.name;
				setTimeout(function() {
					map = new plus.maps.Map("map");
					map.centerAndZoom(new plus.maps.Point(xpoint, ypoint), 18);
					createMarker();
					myLocation();
				}, 300);
				document.getElementById("resetNav").addEventListener('tap', function() {
					resetMap();
				}, false);
				document.getElementById("goNav").addEventListener('tap', function() {
					navigateWithMap();
				}, false);
				document.getElementById("mylocation").addEventListener('tap', function() {
					setMyLocation();
				}, false);
				document.getElementById("gowhereNav").addEventListener('tap', function() {
					mui.openWindow({
						id: 'tourl',
						url: 'out.html',
						show: {
							autoShow: true,
							aniShow: 'pop-in'
						},
						extras: {
							my_xpoint: my_xpoint,
							my_ypoint: my_ypoint,
							xpoint: xpoint,
							ypoint: ypoint
						},
						styles: {
							popGesture: 'hide'
						},
						waiting: {
							autoShow: true
						}
					});
				}, false);
				document.getElementById("dtips").addEventListener('tap', function() {
					readyCall(11185);
				}, false);
			});
			 // 创建景点标志
			function createMarker() {
					var marker = new plus.maps.Marker(new plus.maps.Point(xpoint, ypoint));
					marker.setIcon('../img/post/map-marker-icon.png');
					marker.setLabel(name);
					var bubble = new plus.maps.Bubble(name);
					marker.setBubble(bubble);
					map.addOverlay(marker);
				}
				// 复位到景点位置

			function resetMap() {
					map.centerAndZoom(new plus.maps.Point(xpoint, ypoint), 18);
				}
				// 调用系统地图导航

			function navigateWithMap() {
					// 设置目标位置坐标点和其实位置坐标点
					var dst = new plus.maps.Point(xpoint, ypoint);
					var src = new plus.maps.Point(my_xpoint, my_ypoint);
					// 调用系统地图显示 
					plus.maps.openSysMap(dst, name, src);
				}
				// 我的位置

			function myLocation() {
					map.showUserLocation(true);
					map.getUserLocation(function(state, pos) {
						if (0 == state) {
							my_xpoint = pos.getLng();
							my_ypoint = pos.getLat();
						}
					});
				}
				// 定位到我的位置

			function setMyLocation() {
				map.showUserLocation(true);
				map.getUserLocation(function(state, pos) {
					if (0 == state) {
						map.setCenter(pos);
					}
				});
			}

			function howFar() {
				console.log("my_lng " + my_xpoint);
				console.log("my_lat " + my_ypoint);
				console.log("dis_lng " + xpoint);
				console.log("dis_lat " + ypoint);
				var point1 = new plus.maps.Point(my_xpoint, my_ypoint);
				var point2 = new plus.maps.Point(xpoint, ypoint);
				plus.maps.Map.calculateDistance(point1, point2, function(event) {
					var distance = event.distance; // 转换后的距离值
					alert("Distance:" + distance);
				}, function(e) {
					alert("Failed:" + JSON.stringify(e));
				});
			}

			function readyCall(pnum) {
				// 调用startActivity方法拨打电话
				var btnArray = ['好的', '残忍拒绝'];
				mui.confirm('立即为您拨打？', '中国邮政11185电话订票', btnArray, function(e) {
					if (e.index == 0) {
						plus.device.dial(pnum);
					} else {}
				});
			}
		</script>
		<style type="text/css">
			#map {
				width: 100%;
				position: fixed;
				top: 45px;
				bottom: 100px;
				line-height: 200px;
				text-align: center;
				background: #FFFFFF;
			}
			#dtips {
				position: fixed;
				width: 100%;
				border: 1px solid green;
				bottom: 60px;
			}
			.ipos {
				background: no-repeat center center url();
				background-size: 50px 44px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a id="mylocation" class="mui-icon mui-icon-right-nav mui-icon-location mui-pull-right"></a>
			<h1 class="mui-title">立即前往</h1>
		</header>
		<div id="map">地图加载中...
			<div id="dtips">
				<h5>太远了？快快点我，拨打<span class="mui-badge mui-badge-success">11185</span>买张机票吧！</h5>
			</div>
		</div>

		<nav class="mui-bar mui-bar-tab">
			<a id="resetNav" class="mui-tab-item">
				<span class="mui-icon mui-icon-reload"></span>
				<span class="mui-tab-label">回到景点</span>
			</a>
			<a id="goNav" class="mui-tab-item">
				<span class="mui-icon mui-icon-navigate"></span>
				<span class="mui-tab-label">线路</span>
			</a>
			<a id="gowhereNav" class="mui-tab-item">
				<span class="mui-icon mui-icon-location"></span>
				<span class="mui-tab-label">附近</span>
			</a>
		</nav>
	</body>

</html>